import { AfterViewInit, Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-image-slider',
  templateUrl: './image-slider.component.html',
  styleUrls: ['./image-slider.component.scss']
})
export class ImageSliderComponent implements OnInit, AfterViewInit {

  imageObj: Array<any> = [];
  autoSlideInterval: any;

  effectStyle: string = 'all 1s ease-in-out';
  speed: number = 1; // default speed in second
  slideImageCount: number = 1;
  leftPos: number = 0;
  sliderMainDivWidth: number = 0;
  imageParentDivWidth: number = 0;
  sliderImageSizeWithPadding = 204;
  sliderImageWidth: number = 205;
  visiableImageIndex: number = 0;
  currentIndex: number = 0;

  ligthboxShow: boolean = false;
  
  @Input() images: Array<object> = [];
  @Input() autoSlide: boolean = false;

  constructor() { }

  ngOnInit(): void {
    this.imageObj = this.images;
    this.imageParentDivWidth = this.imageObj.length * this.sliderImageSizeWithPadding;
  }

  ngAfterViewInit() {
    this.imageAutoSlide();
  }
  
  imageAutoSlide() {
    if (!this.ligthboxShow && this.autoSlide) {
      this.autoSlideInterval = setInterval(() => {
          this.next();
      }, 4000);
    }
  }

  prev() {
    this.infinitePrevImg(this.slideImageCount);
    this.getVisiableIndex();
    this.currentIndex--;
  }
  
  next() {
    // this.nextImg();
    this.infiniteNextImg(this.slideImageCount);
    this.getVisiableIndex();
    this.currentIndex++;
  }

  getVisiableIndex() {
    const currentIndex = Math.round((Math.abs(this.leftPos) + this.sliderImageWidth) / this.sliderImageWidth);
    if (this.imageObj[currentIndex - 1] && this.imageObj[currentIndex - 1]['index'] !== undefined) {
      this.visiableImageIndex = this.imageObj[currentIndex - 1]['index'];
    }
  }

  nextImg() {
    if ((this.imageParentDivWidth + this.leftPos) - this.sliderMainDivWidth > this.sliderImageSizeWithPadding * this.slideImageCount) {
      this.leftPos -= this.sliderImageSizeWithPadding * this.slideImageCount;
    } else if ((this.imageParentDivWidth + this.leftPos) - this.sliderMainDivWidth > 0) {
      this.leftPos -= (this.imageParentDivWidth + this.leftPos) - this.sliderMainDivWidth;
    }
  }

  infiniteNextImg(slideCount: number) {
    this.effectStyle = `all ${this.speed}s ease-in-out`;
    this.leftPos = -2 * this.sliderImageSizeWithPadding * slideCount;
    setTimeout(() => {
        this.effectStyle = 'none';
        for (let i = 0; i < slideCount; i++) {
            this.imageObj.push(this.imageObj[slideCount]);
            this.imageObj.shift();
        }
        this.leftPos = -1 * this.sliderImageSizeWithPadding * slideCount;
    }, this.speed * 1000);
  }

  infinitePrevImg(slideCount: number) {
    this.effectStyle = `all ${this.speed}s ease-in-out`;
    this.leftPos = 0;

    setTimeout(() => {
        this.effectStyle = 'none';
        this.leftPos = -1 * this.sliderImageSizeWithPadding * slideCount;
        for (let i = 0; i < slideCount; i++) {
            this.imageObj.unshift(this.imageObj[this.imageObj.length - slideCount - 1]);
            this.imageObj.pop();
        }
    }, this.speed * 1000);
  }

  currentSlide(index: number) {
    if(index < this.currentIndex){
      this.infinitePrevImg(this.currentIndex - index);
    } else {
      this.infiniteNextImg(index - this.currentIndex);
    }
  }

}
